<template>
 <u-popup :show="show" mode="center"  :closeOnClickOverlay="false"  bgColor="transparent">
   <view class="modal-done-wrapper">
     <view class="tit">真的要放弃查看结果吗</view>
     <view class="con">
       <view class="row-1">
         <text class="txt-1">¥</text>
         <text class="txt-2">{{priceNow}}</text>
         <text class="txt-3">即可解锁核心报告</text>
       </view>
       <view class="row-2">(包括MBTI类型+核心分析)</view>
       
       <view class="btn-group">
         <view class="btn-box left-btn" @click="confirmHandle">
           解锁报告
         </view>
         <view class="btn-box right-btn" @click="closeHandle">
           狠心放弃
         </view>
       </view>
         
     </view>
   </view>
 </u-popup>
</template>

<script>
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      priceBefore:{
        type:Number,
        default:0
      },
      priceNow:{
        type:Number,
        default:0
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          bgD: this.imgBaseURL + '/scl/modal-bg-3.png',
          btnImg: this.imgBaseURL + '/scl/modal-btn-3.png',
        },
      }
    },
    watch:{
      visible:{
        handler(val){
          console.log(val,'===================== reloadHistoryVisible')
          this.show = val
        },
        immediate:true
      },
      priceNow:{
        handler(val){
          console.log(val,'===================== priceNow')
        },
        immediate:true
      }
    },
    methods:{
      confirmHandle(){
        this.show = false
        this.$emit('confirm')
      },
      closeHandle(){
        console.log('------closeHandle-------')
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .modal-done-wrapper{
    // width: 610rpx;
    // height: 368rpx;
    background: linear-gradient( 180deg, #FCFEFF 0%, #FCFEFE 8%, #FFEDE5 100%);
    border-radius: 14rpx;
    
    width: 540rpx;
    height: 400rpx;
    // background: #FFF9ED;
    // filter: blur(33px);
    
    .tit{
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 34rpx;
      color: #984B29;
      line-height: 48rpx;
      text-align: center;
      font-style: normal;
      
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }
    
    .con{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      font-style: normal;
      text-align: center;  
      
      .row-1{
        margin-top: 30rpx;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        .txt-1{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #FF4A4A;
          line-height: 37rpx;
          text-align: right;
          font-style: normal;
          margin-right: 4rpx;
        }
        .txt-2{
          font-family: HelveticaNeue, HelveticaNeue;
          font-weight: 500;
          font-size: 50rpx;
          color: #FF4A4A;
          line-height: 54rpx;
          text-align: left;
          font-style: normal;
        }
        .txt-3{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
        }
      }
      
      .row-2{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        
        margin-top: 14rpx;
      }
      
      .btn-group{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        column-gap: 20rpx;
        margin-top: 30rpx;
        
        .left-btn{
          width: 230rpx;
          height: 70rpx;
          background: linear-gradient( 180deg, #FFCE9E 0%, #FF7246 100%);
          border-radius: 35rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          line-height: 70rpx;
          text-align: center;
          font-style: normal;
        }
        
        .right-btn{

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 33rpx;
          text-align: center;
          font-style: normal;
          margin-top: 18rpx;

        }
      }

    }
  }
</style>